<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><link rel="stylesheet" href="css/demo_page.css" type="text/css" media="all"><link rel="stylesheet" href="css/demo_table.css" type="text/css" media="all"><link rel="stylesheet" href="css/my-theme/jquery-ui-1.9.2.custom.css" type="text/css" media="all"><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script><script type="text/javascript" src="http://www.datatables.net/download/build/jquery.dataTables.js"></script><script type="text/javascript">
			$(document).ready(function() {
				$('#table').dataTable({
					        //"sScrollY": 500,
							"bJQueryUI": true,
							"bPaginate": true,
							"sPaginationType": "two_button"
				});				
			} );
			$(function() {
				$('#dialog').dialog({
					/*autoOpen: false,
					show: {
						effect: "blind",
						duration: 1000
					},
					hide: {
						effect: "explode",
						duration: 1000
					},*/
					modal: true,
					buttons: {
						Ok: function() {
							$(this).dialog("close");
						}
					}
				});
			 
				/*$('.opener').click(function() {
					$('#dialog').dialog('open');
				});*/
			});

			</script></head><body>
<h2>My Vinyl Collection</h2>
<table id="table"><thead><tr><th>Titre</th>
<th>Artiste</th>
<th>Genre</th>
<th>Ann&eacute;e</th>
<th>Liste des pistes</th>
</tr></thead><tbody><tr><td>This Is War</td>
<td>30 Seconds To Mars</td>
<td>Rock</td>
<td>2009</td>
<td><button class="opener">Open Dialog</button></td>
</tr><tr><td>Back In Black</td>
<td>AC/DC</td>
<td>Rock</td>
<td>2011</td>
<td><button class="opener">Open Dialog</button></td>
</tr><tr><td>Let There Be Rock</td>
<td>AC/DC</td>
<td>Rock</td>
<td>1977</td>
<td><button class="opener">Open Dialog</button></td>
</tr><tr><td>If You Want Blood You've Got It</td>
<td>AC/DC</td>
<td>Rock</td>
<td>1978</td>
<td><button class="opener">Open Dialog</button></td>
</tr><tr><td>Powerage</td>
<td>AC/DC</td>
<td>Rock</td>
<td>1978</td>
<td><button class="opener">Open Dialog</button></td>
</tr><tr><td>Highway To Hell</td>
<td>AC/DC</td>
<td>Rock</td>
<td>1979</td>
<td><button class="opener">Open Dialog</button></td>
</tr><tr><td>For Those About To Rock We Salute You</td>
<td>AC/DC</td>
<td>Rock</td>
<td>1981</td>
<td><button class="opener">Open Dialog</button></td>
</tr><tr><td>Let It Be</td>
<td>Beatles, The</td>
<td>Rock</td>
<td>1978</td>
<td><button class="opener">Open Dialog</button></td>
</tr><tr><td>The Beatles 1967-1970</td>
<td>Beatles, The</td>
<td>Rock</td>
<td>1978</td>
<td><button class="opener">Open Dialog</button></td>
</tr><tr><td>1962-1966</td>
<td>Beatles, The</td>
<td>Rock</td>
<td>1978</td>
<td><button class="opener">Open Dialog</button></td>
</tr><tr><td>Mad Fingers Ball</td>
<td>Bj&oslash;rn Berge</td>
<td>Blues</td>
<td>2013-02-22</td>
<td><button class="opener">Open Dialog</button></td>
</tr><tr><td>London Calling</td>
<td>Clash, The</td>
<td>Rock</td>
<td>1979</td>
<td><button class="opener">Open Dialog</button></td>
</tr><tr><td>More Creedence Gold</td>
<td>Creedence Clearwater Revival</td>
<td>Rock</td>
<td>1973</td>
<td><button class="opener">Open Dialog</button></td>
</tr><tr><td>Random Access Memories</td>
<td>Daft Punk</td>
<td>Electronic</td>
<td>2013-05-17</td>
<td><button class="opener">Open Dialog</button></td>
</tr><tr><td>Making Movies</td>
<td>Dire Straits</td>
<td>Rock</td>
<td>1980</td>
<td><button class="opener">Open Dialog</button></td>
</tr><tr><td>Love Over Gold</td>
<td>Dire Straits</td>
<td>Rock</td>
<td>1982</td>
<td><button class="opener">Open Dialog</button></td>
</tr><tr><td>Dire Straits</td>
<td>Dire Straits</td>
<td>Rock</td>
<td>1978-00-00</td>
<td><button class="opener">Open Dialog</button></td>
</tr><tr><td>Communiqu&eacute;</td>
<td>Dire Straits</td>
<td>Rock</td>
<td>1979</td>
<td><button class="opener">Open Dialog</button></td>
</tr><tr><td>Are You Experienced</td>
<td>Jimi Hendrix Experience, The</td>
<td>Rock</td>
<td>1973</td>
<td><button class="opener">Open Dialog</button></td>
</tr><tr><td>Axis:Bold As Love</td>
<td>Jimi Hendrix Experience, The</td>
<td>Rock</td>
<td></td>
<td><button class="opener">Open Dialog</button></td>
</tr><tr><td>Electric Ladyland</td>
<td>Jimi Hendrix Experience, The</td>
<td>Rock</td>
<td></td>
<td><button class="opener">Open Dialog</button></td>
</tr><tr><td>Master Of Puppets</td>
<td>Metallica</td>
<td>Rock</td>
<td>1986-03-00</td>
<td><button class="opener">Open Dialog</button></td>
</tr><tr><td>Repression</td>
<td>Trust (2)</td>
<td>Rock</td>
<td>1980</td>
<td><button class="opener">Open Dialog</button></td>
</tr><tr><td>Marche Ou Cr&egrave;ve</td>
<td>Trust (2)</td>
<td>Rock</td>
<td>1981</td>
<td><button class="opener">Open Dialog</button></td>
</tr><tr><td>Orange Mecanique</td>
<td>Various</td>
<td>Classical</td>
<td>1972</td>
<td><button class="opener">Open Dialog</button></td>
</tr><tr><td>Tron - Original Motion Picture Soundtrack</td>
<td>Wendy Carlos</td>
<td>Classical</td>
<td>1982</td>
<td><button class="opener">Open Dialog</button></td>
</tr></tbody></table><div id="dialog" title="Basic dialog"><p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p></div>
</body></html>
